<!-- 期末调汇页面 -->
<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="searchCriteria"
        ref="searchCriteria"
        :rules="rules"
        size="mini"
        class="padding-top-sm flex"
      >
        <el-form-item prop="period" label="期间">
          <el-date-picker
            type="month"
            v-model="searchCriteria.period"
            placeholder="请选择期间"
            style="width: 200px"
            value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>

        <el-button
          type="primary"
          size="mini"
          v-loading.fullscreen.lock="fullscreenLoading"
          @click="remit()"
          >期末调汇</el-button
        >
      </el-form>
    </el-card>

    <div class="padding color margin-top">已调汇凭证列表</div>
    <el-card>
      <el-table
        class="text-sm"
        size="mini"
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        min-height="20em"
      >
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <template v-if="item.prop === 'cuser'">
              {{ userMap[scope.row["cuser"]] }}
            </template>
            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              circle
              size="mini"
              @click="viewFinanceVoucher(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
export default {
  name: "finalTuningRemit",
  data() {
    return {
      searchCriteria: {
        period: ""
      },
      loading: true,
      fullscreenLoading: false,
      userMap: {},
      tableData: [],
      rules: {
        period: [
          {
            required: true,
            message: "请选择期间",
            trigger: "change"
          }
        ]
      },
      tableColumns: [
        { prop: "accountMonth", label: "期间" },
        { prop: "voucherNo", label: "凭证号" },
        { prop: "accountDate", label: "凭证日期" },
        { prop: "totalDebitMoney", label: "借方金额" },
        { prop: "totalCreditorMoney", label: "贷方金额" },
        { prop: "cuser", label: "制单人" },
        { prop: "cdate", label: "创建时间" }
      ]
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    // 加载数据
    async list() {
      let res = await ajax("list", {});
      this.userMap = res.userMap;
      this.tableData = res.financeVouchers;
      this.loading = false;
    },
    // 期末调汇按钮
    async remit() {
      const criteria = this.searchCriteria.period;
      this.$confirm("此操作是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.fullscreenLoading = true;
          let data = {};
          data["period"] = criteria;
          ajax("submit", data).then(
            res => {
              console.log(res);
              this.fullscreenLoading = false;
              let success = res.success;
              if (!success) {
                this.$message.error(res.message);
                return;
              }
              this.$store.dispatch("loadPageData", this.$route.params.uri);
              // window.location.reload();
            },
            error => {
              this.fullscreenLoading = false;
              console.log(error);
            }
          );
        })
        .catch(() => {
          this.fullscreenLoading = false;
        });
    },
    // 查看凭证详情
    viewFinanceVoucher(id) {
      if (id) {
        window.open("/#/blank/finance__voucher__view?pid=" + id);
      }
    }
  }
};
</script>
